<template>
	<view>
		<cover-view class="back-to-scl-checkup-comp">
			<cover-view>
				<cover-image @touchend.stop="backHandle" :src="backImg" class="back-to-btn-box"
					:class="[{'back-to-depression':type == '2' && isSclAllReport != 'N','back-to-sexuality':type=='3' && isSclAllReport != 'N','back-checkup-new-pay-img':isSclAllReport=='N'}]">
				</cover-image>
			</cover-view>
			<cover-image :src="staticImgs.test_result_bottom_shou_zhi" class="back-to-btn-shou-zhi"
				v-show="isShowHand"></cover-image>
		</cover-view>
	</view>
</template>

<script>
	export default {
		props: {
			isShowHand: Boolean,
			isSclAllReport: String,
			type: {
				type: [String, Number],
				default: '1'
			}
		},
		data() {
			return {
				staticImgs: {
					test_result_bottom_shou_zhi: this.imgBaseURL + '/scl/test_result_bottom_shou_zhi_new.gif',
					backImg: this.imgBaseURL + '/scl/checkup-mental/back-scl-checkup-page-btn-new.png',
					backCheckupNewPayImg: this.imgBaseURL + '/scl/checkup-mental/huoquxiangqingxijiedu.png',
					backDepressedImg: this.imgBaseURL + '/scl/checkup-depressed/back-scl-checkup-page-btn-new-new.png',
					backSexualityImg: this.imgBaseURL + '/scl/checkup-sexuality/back-scl-checkup-page-btn-new.png',
          backCheckupDepressedNewPayImg: this.imgBaseURL + '/scl/checkup-depressed/new_paypage_back_btn.png'
				},
				backImg: '',
			}
		},
		watch: {
			type: {
				handler(val) {
					if (val == '2') {
            if (this.isSclAllReport == 'N') {
              this.backImg = this.staticImgs.backCheckupDepressedNewPayImg
            } else {
              this.backImg = this.staticImgs.backDepressedImg
            }
					} else if (val == '3') {
            if (this.isSclAllReport == 'N') {
              this.backImg = this.staticImgs.backCheckupDepressedNewPayImg
            } else {
              this.backImg = this.staticImgs.backSexualityImg
            }
					} else {
						if (this.isSclAllReport == 'N') {
							this.backImg = this.staticImgs.backCheckupNewPayImg
						} else {
							this.backImg = this.staticImgs.backImg
						}

					}

				},
				immediate: true
			}
		},
		methods: {
			backHandle() {
				this.$emit('back')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.back-to-scl-checkup-comp {
		width: 749rpx;
		// height: 150rpx;
		background: #FFFFFF;
		// background-color: red;
		box-shadow: 0rpx -2rpx 6rpx 0rpx rgba(208, 208, 208, 0.5);
		border-radius: 12rpx 12rpx 0rpx 0rpx;
		padding: 0;
		padding-top: 28rpx;
		position: fixed;
		bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 10;


		.back-to-btn-box {
			display: flex;
			align-items: center;
			justify-content: center;
			// border-radius: 52rpx;
			height: 98rpx;
			width: 368rpx;
			margin: auto;
			z-index: 11;

			.img {
				width: 34rpx;
				height: 34rpx;
			}
		}

		.back-to-depression {
			width: 368rpx;
			height: 98rpx;
		}

		.back-to-sexuality {
			width: 550rpx;
			height: 94rpx;
		}

		.back-checkup-new-pay-img {
			width: 430rpx;
			height: 112rpx;
		}

	}

	.back-to-btn-shou-zhi {
		width: 160rpx;
		height: 160rpx;
		position: fixed;
		left: 450rpx;
		bottom: 0rpx;
		pointer-events: none;
		// animation: loopPointer 1.2s ease infinite;
		z-index: 999;
	}

	@keyframes loopPointer {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(.7);
		}

		100% {
			transform: scale(1);
		}
	}
</style>